<template>
  <div class="els-row">
    <label>{{ attrs.label }}</label>
    <div class="els__content">
      <Ele
        :attrs="attrs"
        v-model:checkedKeys="model[attrs.field]"
        v-model:value="model[attrs.field]"
        v-model:checked="model[attrs.field]"
        v-model:file-list="model[attrs.field]"
      >
        <template v-if="attrs.slotName" #[attrs.slotName]>
          <slot :name="attrs.slotName"></slot>
        </template>
      </Ele>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const attrs = ref({});
const model = ref({});

watch(
  () => props.config,
  (val) => {
    const vals = { ...val };
    attrs.value = {
      ...vals,
      action: vals.action,
      method: "post",
      listType: "picture-card",
      arr2str: true,
      maxCount: 1,
      type: "Upload",
      listType: "picture-card",
      arr2str: true,
      maxCount: 1,
      type: "Upload",
      beforeUpload: (file) => {
        const isPNG = file.type.match(/(jp(e)?g|png|gif)/g);
        const limit = file.size / 1024 / 1024 <= 10;
        if (!isPNG) {
          message.error(`请上传图片格式！`);
          return Upload.LIST_IGNORE;
        }
        if (!limit) {
          message.error(`图片大小不能大于10M！`);
          return Upload.LIST_IGNORE;
        }
        return isPNG && limit;
      },
      render: () => {
        return `<div class="upd"><i class="icon iconfont icon-tianjia1" style="font-size: 24px;"></i></div>`;
      },
    };
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>
<style scoped lang="scss">
.els-row {
  label {
    display: block;
    text-align: right;
    margin-right: 10px;
  }
  display: flex;
  align-items: center;
}
:deep(.els__content) {
  flex: 1;
}
</style>
